import React, { Component } from 'react';

import { Flex, Button} from 'antd-mobile';
import { NavBar, Icon, List, InputItem, Toast  } from 'antd-mobile';
import { Link } from 'react-router-dom';
import { get, post } from '../api/getData';

import 'antd-mobile/lib/flex/style/index';
import 'antd-mobile/lib/nav-bar/style/css';
import 'antd-mobile/lib/icon/style/css';
import 'antd-mobile/lib/list/style/css';
import 'antd-mobile/lib/button/style/css';
import 'antd-mobile/lib/toast/style/css';
import 'antd-mobile/lib/input-item/style/css';


import User from './User';

import '../allStyle.css';

class Payment extends Component{
    state = {
        user : {
            nick_name: '未登录',
            headimgurl: 'http://thirdwx.qlogo.cn/mmopen/ajNVdqHZLLC1KB9lXAY3JlHgRLvtswg1WaoG0l3VJVb5aSp38UM1TKcg6GOvwScVWB0EPxJubpmEgSISZ45Lgw/132',
            balance: 0,
            commission: 0,
            withdraw_account:'',
            withdraw_balance: 0
        }
    }
    componentDidMount(){
        let _this = this;
        get('/api/user', {}, function (error, data) {
            if(null === error){
                _this.setState({
                    user: data
                });
            }
        });
        document.title = '代理中心';
    }

    withdraw(){
        console.log(this.state.withdraw_balance);
        let amount = this.state.withdraw_balance;
        if(amount < 100){
            Toast.info('提现金额不能少于100元');
            return;
        }
        let _this = this;
        post('/api/withdraw', {amount:amount }, function (error, data) {
            if(null === error){
                Toast.success('提现申请成功');
                localStorage.removeItem('examine');
                window.location.href = "/Examine?title=提现申请";
            }else{
                Toast.fail(error);
            }
        });
    }
    render(){
        const Item = List.Item;
        const Brief = Item.Brief;
        return(
            <div >
                <NavBar
                    mode='light'
                    icon={<Link to='/User'><Icon type="left" /></Link>}
                    style={{backgroundColor:'white'}}
                ></NavBar>
                <div style={{marginTop:'1.2rem',height:'60px'}}>
                    <p style={{fontSize:'18px',lineHeight:'60px',marginLeft:'5%'}}>账户可提现金额:<span>{this.state.user.balance}</span></p>
                </div>
                <div>
                <List  className="my-list" >
                    <Flex wrap="wrap">
                        <InputItem
                            type='number'
                            placeholder="请输入提现金额"
                            ref={el => this.autoFocusInst = el}
                            onChange={(value) => this.setState({withdraw_balance:value})}
                        >提现金额：</InputItem>
                    </Flex>
                </List>
                <List>
                    <Item onClick={() => {}}>
                        <Flex wrap="wrap">
                            <span style={{color:'gray',fontSize:'10px'}}>到支付宝账户:{this.state.user.withdraw_account}</span>
                        </Flex>
                    </Item>
                </List>
                <List style={{marginTop:'15px'}}>
                    <Button onClick={this.withdraw.bind(this)} style={{background:'#00bc12',color:'white'}} >确认提现</Button>
                </List>
                <div style={{marginLeft:'1%',fontSize:'13px',color:'grey',marginTop:'10px',backgroundColor:'#fff',padding:'20px'}}>
                    <p>温馨提示：</p><br/>
                    <p>1.金额满100元可申请提现</p><br/>
                    <p>2.每月21日可提取上月收入（如6月21日可提取5月31钱的收入），一次最多可提现20万元</p><br/>
                    <p>3.预计5个工作日内完成审核并兑现金额</p><br/>
                </div>
                </div>
            </div>
        )
    }
}
export default Payment;
